



<!-- 表单标签
    form        创建表单

    select      创建下拉选择框
        option      选项
    
    label       表单注释

    input       创建输入框

    textarea    创建多行文本输入框

-->







<!-- 表单属性

    action=""       指定数据提交的目标地址      (url，网址，本地路径)
                    空      当前页面网址
                    GET:    http://httpbin.org/get
                    POST:   http://httpbin.org/post

    method=""       指定数据提交的提交方式      (GET,POST   不写默认GET)
                    空      为空默认为GET
                    get     多用于获取数据
                    post    多用于修改数据

    type=""        输入框类型   (一般用于input中)
                    text        普通文本
                    password    密码
                    radio       单选
                    checkbox    多选
                    submit      提交
                    reset       全部清空为默认值
    
    for=""          建立表单关联
                    (值必须与id值一致)

    id=""           数据的唯一标识
                    （不能重复）

    name=""         标识数据提交时的名称
                    （所有需要提交的数据----必须加上）
                    （服务端需要通过名称来获取对应的值）

    value=""        表单元素的值
                    (不需要手动输入内容的标签----必须加上)
    
    require=""      指定为非空必填，不填无法提交且会提醒用户填写

    autocomplete="on"       自动完成，自动保存（默认on开启，手动off关闭）

    checked         选择框中默认选中内容
    selected        下拉框中默认选中内容
    placeholder     输入框提示信息
    rows            输入框行数
    cols            输入框列数

-->













<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单标签</title>
</head>
<body>



    <form action="" method="post">

        <p>
            <label for="username">账号:</label>
            <br>
            <input type="text" id="username" name="username"  placeholder="请输入账号" autocomplete="off" required>
            <br>
            <br>
            <label for="password">密码:</label>
            <br>
            <input type="password" id="password" name="password"  placeholder="请输入密码" required>
            <br>
        </p>



        <p>
            <span>性别:</span>
            <br>
            <label for="man">男</label>
            <input type="radio" name="sex" checked value="man" >
            <br>
            <label for="women">女</label>
            <input type="radio" name="sex" value="women" >
            <br>
        </p>


        <p>
            <span>出生日期：</span>
            <br>
            <input type="date" name="born_date" value="2000-01-01" id="born_date" >
            <input type="time" name="born_time" value="00:00" id="born_time">
            <br>
        </p>



        <p>
            <span>地址：</span>
            <select name="address">
                <option value="---" selected>---</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="广州">广州</option>
            </select>
        </p>




        <p>
            <span>兴趣爱好：</span>
            <br>
            <label for="basketball">篮球</label>
            <input type="checkbox" name="hobby" value="basketball" id="basketball" >
            <br>
            <label for="football">足球</label>
            <input type="checkbox" name="hobby" value="football" id="football" >
            <br>
            <label for="volleyball">排球</label>
            <input type="checkbox" name="hobby" value="volleyball" id="volleyball" >
            <br>
        </p>



        <p>
            <span>喜欢颜色：</span>
            <br>
            <input type="color" name="color" id="like_color">
        </p>




        <p>
            <span>个性签名：</span>
            <br>
            <textarea name="info" id="info" cols="30" rows="3"></textarea>
        </p>




        <p>
            <input type="submit" value="注册">
            <br>
            <br>
            <input type="reset" value="清除">
        </p>





    </form>
</body>
</html>